<template>
  <div class="detail">
    <img :src="this.imgUrl" alt="" width="1537px">
    <div class="detail-wrapper">
        <div class="top" v-for="(item , index) in detailInfo" :key="index">
            <h3>{{item.productName}}</h3>
            <p class="date">发布时间: 2020-02-14 15:46</p>
            <div class="detail-header">
                <span>编号：{{item.productId}}</span>
                <span>品名：{{item.productName}}</span>
                <span>规格：{{item.productNum}}箱</span>
            </div>
            <div class="img-wrapper">
                <img :src="item.productImage" alt="" width="300px">
            </div>
            <div class="next-pre">
                <p>上一个: </p>
                <p>下一个：</p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      detailInfo: [],
      imgUrl: ''
    }
  },
  methods: {
    getDetailInfo () {
      var param = {
        productId: this.$route.params.productId
      }
      axios.get('/goods/detail', {
        params: param
      }).then((response) => {
        let res = response.data
        console.log(res)
        this.detailInfo = res.result.list
        this.imgUrl = res.result.list[0].productImage
        console.log(res.result.list)
      })
    }
  },
  mounted () {
    this.getDetailInfo()
  }
}
</script>

<style lang="scss" scoped>
.detail {
    height: 500px;
    position: relative;
    overflow: hidden;
    .detail-wrapper {
        height: 500px;
        // background-color: red;
        background-color: rgba(0, 0, 0, .5);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        .top {
            z-index: 999;
            h3 {
            text-align: center;
            font-size: 18px;
            color:#8f6228;
            font-weight: 700;
            // margin-top: 50px;
            padding-top: 50px;
            }
            .date {
                text-align: center;
                font-size: 14px;
                line-height: 36px;
                color: #bfa27b;
            }
            .detail-header {
                width: 100%;
                height: 32px;
                background-color: #fff7df;
                color:#bd9d72;
                border:1px solid #fdebb4;
                line-height: 32px;
                padding-left: 100px;
                box-sizing: border-box;
                span {
                    color:#bd9d72;
                    font-size: 12px;
                }
            }
            .img-wrapper {
                margin-left: 630px;
                margin-top: 30px;
                display: inline-block;
                border: 1px solid #ccc;
                overflow: hidden;
                border-radius: 20px;
                box-shadow: 0px 0px 10px rgba($color: #000000, $alpha: .4);
                // width: 400px;
                // overflow: hidden;
            }
            .next-pre {
                position: absolute;
                left: 100px;
                top: 440px;
                p {
                    line-height: 20px;
                    color: #bfa27b;
                    font-size: 14px;
                }
            }
        }
    }
}
</style>
